import React, { memo } from 'react'
import stepImg from "@/assets/images/hospital/step.png"
import kcalImg from "@/assets/images/hospital/kcal.png"
import timeImg from "@/assets/images/hospital/time.png"
import standImg from "@/assets/images/hospital/stand.png"

function SportInfo(props) {
    return (
        <div className='hosSportBox'>
            <div className='hosSportTop'>
                {/* 步数 */}
                <div className='hosSportStep'>
                    <div className='hosStepTop'>
                        <img alt='' src={stepImg} className='hosStepIcon' />
                        <span>步数</span>
                    </div>
                    <div className='hosStepNum'>
                        <span className='hosStepCount'>{props.steps ? props.steps : 0}</span>
                        <span className='hosStepUnit'>/步</span>
                    </div>
                </div>

                {/* 卡路里 */}
                <div className='hosSportStep'>
                    <div className='hosStepTop'>
                        <img alt='' src={kcalImg} className='hosStepIcon' />
                        <span>卡路里</span>
                    </div>
                    <div className='hosStepNum'>
                        <span className='hosStepCount'>{props.kcal ? props.kcal : 0}</span>
                        <span className='hosStepUnit'>/千卡</span>
                    </div>
                </div>
            </div>


            {/* 线 */}
            <div className='hosSportLine'></div>


            <div className='hosSportTop'>
                {/* 步数 */}
                <div className='hosSportStep'>
                    <div className='hosStepTop'>
                        <img alt='' src={timeImg} className='hosStepIcon' />
                        <span>中高强度</span>
                    </div>
                    <div className='hosStepNum'>
                        <span className='hosStepCount'>{props.intensity ? props.intensity : 0}</span>
                        <span className='hosStepUnit'>/分</span>
                    </div>
                </div>

                {/* 步数 */}
                <div className='hosSportStep'>
                    <div className='hosStepTop'>
                        <img alt='' src={standImg} className='hosStepIcon' />
                        <span>站立</span>
                    </div>
                    <div className='hosStepNum'>
                        <span className='hosStepCount'>{props.validStand ? props.validStand : 0}</span>
                        <span className='hosStepUnit'>/次</span>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default memo(SportInfo);
